{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/lib/swiper/swiper.min.css">
<link rel="stylesheet" href="{{site.static}}/css/game_detail.css"> 
{% endblock %}
{% block js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="{{site.static}}/js/product/game_detail.js"></script>
{% endblock %}
{% block content %} 
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("game_detail_page_title"),level:2} %} 
    {% include "../_base/page_header.html" %} 
    {% endblock %}
<div class="eui-main-container eui--padding-b-0 game-detail-main-container">
    <div class="eui-page-banner eui--position-rel">
        <div class="banner-bacg"></div>
        <div class="eui-banner-object">
             <div class="eui-banner-header eui--text-center">
                <img src="{{site.cdn}}/test-game-icon.png" class="eui--display-b" alt="">
                <a href="" class="eui-btn eui-btn-white">{{__("btn_download")}}</a>
                <a href="" class="eui-btn eui-btn-primary">{{__("btn_apk_download")}}</a>            
            </div>
            <div class="eui-banner-content eui--white-color eui--font-26">
                《剑侠情缘手游》新马版以二十年经典武侠RPG《剑侠情缘》游戏系列为基础，西山居原班人马倾力打造，传承经典玩法，以细腻唯美画面......
            </div>
            <div class="eui-banner-footer">
                <span class="eui-icon eui-icon-arrow_down"></span>
            </div>
        </div>       
    </div>     
    <div class="eui-page-content">
        <div class="content-one eui--white-bacg">
            <ul class="eui-bar-tab eui--clearfix">
                <li class="eui-tab-item">
                    <a href="javascript:;" class="eui-tab-nav-link active">{{__("game_detail_nav_one")}}</a>
                </li>
                <li class="eui-tab-item">
                    <a href="javascript:;" class="eui-tab-nav-link">{{__("game_detail_nav_two")}}</a>
                </li>
                <li class="eui-tab-item">
                    <a href="javascript:;" class="eui-tab-nav-link">{{__("game_detail_nav_three")}}</a>
                </li>
            </ul>
            <div class="swiper-container" id="game_detail_swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="">
                            <img src="{{site.cdn}}/test-game-detail-img-01.jpg" class="eui--width-100 display-b" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="">
                            <img src="{{site.cdn}}/test-game-detail-img-01.jpg" class="eui--width-100 display-b" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="">
                            <img src="{{site.cdn}}/test-game-detail-img-01.jpg" class="eui--width-100 display-b" alt="">
                        </a>
                    </div>
                </div>           
            </div>
        </div>        
        <div class="eui-card eui--white-bacg eui--margin-y-20">
            <div class="eui-card-header">{{__("game_detail_card_title_1")}}</div>
            <div class="eui-card-content">
                <ul class="eui-table-view news-list">
                    {% for item in news.data %}
                    <li class="eui-table-view-cell">
                        {% if loop.index === 1 %}
                        <a href="/news/newsDetail" class="eui--display-b eui--position-rel eui--warning-color eui--clearfix eui--font-26">                    
                        {% elif loop.index === 2 %}
                        <a href="/news/newsDetail" class="eui--display-b eui--position-rel eui--success-color eui--clearfix eui--font-26">
                        {% elif loop.index === 3 %}
                        <a href="/news/newsDetail" class="eui--display-b eui--position-rel eui--danger-color eui--clearfix eui--font-26">                    
                        {% else %}                
                        <a href="/news/newsDetail" class="eui--display-b eui--position-rel eui--black-color eui--clearfix eui--font-26">
                        {% endif %}
                            <div class="eui-media-header eui--pull-left eui--position-rel">
                                <span class="eui-icon eui-icon-play-btn"></span>
                                <img class="eui-media-img" src="{{site.cdn}}/test-banner.jpg">                        
                            </div>
                            <div class="eui-media-body">
                                <p class="eui--ellipsis">{{item.title}}}</p>
                            </div>
                            <div class="eui-media-footer">
                                <span class="eui-icon eui-icon-top"></span>                        
                                <!--<span class="eui-icon eui-icon-hot"></span>                        
                                <span class="eui-icon eui-icon-elite"></span>                                                -->
                                <span class="detail-time eui--pull-right">{{item.update_time}}</span>
                            </div>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="eui-card-footer">
                <a href="/index/news" class="eui-btn eui-btn-primary eui-btn-lg">{{__("btn_more")}}</a>
            </div>
        </div>   
        <div class="eui-card eui--white-bacg">
            <div class="eui-card-header">{{__("game_detail_card_title_2")}}</div>
            <div class="eui-card-content eui--margin-x-16">
                <ul class="eui-table-view video-list">
                    <li class="eui-table-view-cell">
                        <div class="eui-media">
                            <div class="eui-media-header eui--clearfix">
                                <span class="eui-icon eui-icon-play-btn"></span> 
                                <img class="eui-media-img" src="{{site.cdn}}/test-banner.jpg">
                                <span class="video-time">04:30</span>
                            </div>                       
                            <div class="eui-media-body eui--font-24 eui--position-rel eui--clearfix">
                                <img src="{{site.cdn}}/test-game-icon01.png" class="eui--pull-left" alt="">                       
                                <div class="eui-media-object eui--pull-left">   
                                    <p class="eui-media-object-body">我是视频名称，最多可显示两行最少显示一行。每30个字符，右侧留空，不填满，参考YouTube。</p>
                                    <div class="eui-media-object-footer eui--clearfix">
                                        <div class="eui--pull-left">
                                            <span class="eui-icon eui-icon-play-btn_sm"></span> 9999
                                        </div>
                                        <div class="eui--pull-right">
                                            <span class="eui-icon eui-icon-clock"></span> 08-26
                                        </div>
                                    </div>
                                </div>  
                                <span class="eui-icon eui-icon-dotted"></span>                                                                                                                                          
                            </div>
                        </div>                    
                    </li>
                </ul>
            </div>
            <div class="eui-card-footer">
                <a href="/index/video" class="eui-btn eui-btn-primary eui-btn-lg">{{__("btn_more")}}</a>
            </div>
        </div> 
        <div class="eui-card fresh-gift-list">
            <div class="eui-card-header">{{__("game_detail_card_title_3")}}</div>
            <div class="eui-card-content">
                <ul class="eui-table-view card-list">
                    <li class="eui-table-view-cell eui--position-rel eui--margin-b-20">
                        <div class="eui-media eui--clearfix">   
                            <div class="eui-media-body eui--position-rel eui--clearfix">                            
                                <div class="eui-media-body-l eui--pull-left">
                                    <span class="eui-icon eui-icon-gift eui-media-img eui--pull-left"></span>                                      
                                </div>                
                                <div class="eui-media-body-r eui--pull-left eui--font-26 eui--black-color">  
                                    <h2 class="eui-media-object-body">礼包名称《剑侠情缘》新手礼包</h2>                                        
                                    <p class="eui--959494-color">1000银两；银币召唤券；一级强化石；银币*10000 （每行20个字符）</p>
                                </div>
                                <span class="eui-icon eui-icon-received eui--display-flex">
                                    <b class="eui-icon-text eui--font-w-normal">{{__("btn_received_serrated")}}</b>
                                </span>  
                            </div>
                        </div>                    
                    </li>
                    <li class="eui-table-view-cell eui--position-rel eui--margin-b-20">
                        <div class="eui-media eui--clearfix">   
                            <div class="eui-media-body eui--position-rel eui--clearfix">                            
                                <div class="eui-media-body-l eui--pull-left">
                                    <span class="eui-icon eui-icon-gift eui-media-img eui--pull-left"></span>                                      
                                </div>                
                                <div class="eui-media-body-r eui--pull-left eui--font-26 eui--black-color">  
                                    <h2 class="eui-media-object-body">礼包名称《剑侠情缘》新手礼包</h2>                                        
                                    <p class="eui--959494-color">1000银个字符）</p>
                                </div>
                                <span class="eui-icon eui-icon-received"></span>  
                            </div>
                        </div>                    
                    </li>
                    <li class="eui-table-view-cell eui--position-rel eui--margin-b-20">
                        <div class="eui-media eui--clearfix">   
                            <div class="eui-media-body eui--position-rel eui--clearfix">                            
                                <div class="eui-media-body-l eui--pull-left">
                                    <span class="eui-icon eui-icon-gift_active eui-media-img eui--pull-left"></span>                                      
                                </div>                
                                <div class="eui-media-body-r eui--pull-left eui--font-26 eui--black-color">  
                                    <h2 class="eui-media-object-body">礼包名称《剑侠情缘》新手礼包</h2>                                        
                                    <p class="eui--959494-color">1000银两；</p>
                                </div>  
                            </div>
                            <div class="eui-media-footer eui--width-100 eui--position-rel">
                                <a href="javascript:;" class="eui-btn eui-btn-lg eui-btn-receive_serrated eui--width-100">{{__("btn_receive_serrated")}}</a>
                            </div>
                        </div>                    
                    </li>
                    <li class="eui-table-view-cell eui--position-rel eui--margin-b-20">
                        <div class="eui-media eui--clearfix">   
                            <div class="eui-media-body eui--position-rel eui--clearfix">                            
                                <div class="eui-media-body-l eui--pull-left">
                                    <span class="eui-icon eui-icon-gift_active eui-media-img eui--pull-left"></span>                                      
                                </div>                
                                <div class="eui-media-body-r eui--pull-left eui--font-26 eui--black-color">  
                                    <h2 class="eui-media-object-body">礼包名称《剑侠情缘》新手礼包</h2>                                        
                                    <p class="eui--959494-color">1000银两；1000银个字符）1000银个字符）1000银个字符）1000银个字符）</p>
                                </div>  
                            </div>
                            <div class="eui-media-footer eui--width-100 eui--position-rel">
                                <a href="javascript:;" class="eui-btn eui-btn-lg eui-btn-receive_serrated eui--width-100">{{__("btn_receive_serrated")}}</a>
                            </div>
                        </div>                    
                    </li>
                </ul>
            </div>
        </div> 
        <div class="eui-card eui--white-bacg">
            <div class="eui-card-header">{{__("game_detail_card_title_4")}}</div>
            <div class="eui-card-content eui--margin-x-16 message-box">

            </div>
        </div>
    </div>    
</div>    
{% endblock %}